{layout name="layout" /}
<link href="//tencent.beecdn.cn/libs/iCheck/1.0.2/skins/all.css" rel="stylesheet">
<link href="//tencent.beecdn.cn/libs/iCheck/1.0.2/skins/square/blue.css" rel="stylesheet">
<script src="//tencent.beecdn.cn/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>
<div class="row">
    <div class='col-xs-12'>
        <ul class="nav nav-pills text-center text-black">
            <li  class="{:input('state',0)==0?'activity':''} change_tab pull-left" style="width: 33.333%;margin-left:0px;">
                <a class="btn disabled text-muted" href="{:merge_url('plan_list',['state'=>0]);}">待办</a></li>
            <li  class=" change_tab {:input('state',0)==1?'activity':''}"  style="width: 33.333%;margin-left:0px;">
                <a class="btn disabled text-muted" href="{:merge_url('plan_list',['state'=>1]);}">完成</a></li>
            <li  class=" change_tab {:input('state',0)==1?'':''} pull-right"  style="width: 33.333%; margin-left:0px;">
                <a class="btn disabled text-muted" href="{:merge_url('plan_stats',['state'=>1]);}">统计</a></li>
        </ul>
    </div>
</div>
<div class="row m-t-xs bottom-grey p-t-5 " id='content_replace'>
    {php}
        echo $list_html??'';
    {/php}
</div>
<div class="row text-center" style ="line-height: 8rem;" >
    <span style='backgroud-color:white;'>&nbsp;</span>
</div>
<div id="add_div" class="row" style ="position:fixed;bottom: 0px;width:100%;background-color: white" >
    <div class="col-xs-offset-2 col-xs-8 text-center" style="position:static">
        <a href="{:merge_url('add_plan');} " class=""  style='color: #286090;font-size:5rem;border-radius: 50%;position: relative;top: -5px'>
            <span  class="glyphicon glyphicon-plus-sign"></span>
        </a>
    </div>
<!--    <div class="col-xs-2 pull-right text-center m-b-xs m-t-xs position-r" style="color: #286090;">
        <a href="{:merge_url('half/half_list');} " class="btn btn-info btn-sm" role="button" style="border-radius: 30%"> 
            晓时间
        </a>
    </div>-->
</div>
<script src="//tencent.beecdn.cn/libs/highcharts/6.1.3/highcharts.js"></script>
<script src="//tencent.beecdn.cn/libs/iCheck/1.0.2/icheck.min.js"></script>
<script>
    $(function($){
        var turn = 6;
       $("#add_div").on('click',function() {
            turn--;
            if (turn==0) {
                location.href = '{:merge_url('half/half_list');}';
            }
        })
       
        $(".change_tab").on('click',function(event) {
            event.preventDefault();
            change_teb(this);
            get_content(this);
    });
    
        function change_teb(ele) {
            $(".change_tab").removeClass('activity');
            $(ele).addClass("activity");
        }
        
        function get_content(ele) {
            let url =$(ele).children('a').attr('href'); 
            $.get(url,{},function(res) {
                  $("#content_replace").html(res);
                  $("#add_div").show();
                     $('input').iCheck({
                            checkboxClass: 'iradio_square-blue',
                            radioClass: 'iradio_square-blue',
                            increaseArea: '50%' // optional
                        });
        })
        }
        
        $(window).swipe({
                swipeLeft:function(){
                    $(".activity").next().click();
                },
                swipeRight:function(){
                    $(".activity").prev().click();
                }
            });
        
        $('input').iCheck({
            checkboxClass: 'iradio_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '50%' // optional
        });
        
        $('#content_replace').on('ifChecked', 'input' ,function(event){
                        let url = "{:merge_url('change_state');}"
                        let data =  {id:$(this).data('id')};
                        //添加划线
                        $(this).closest('div.col-xs-1').next('div').wrapInner("<del></del>");
                        $.post (url, data, function (res)
                        {
                            if (res.code)
                            {
                            }
                        });
          });
        $('#content_replace').on('ifUnchecked','input' ,function(event){
                        let url = "{:merge_url('change_state');}"
                        let data = {id:$(this).data('id')};
                        //祛除划线
                        let ele_div =$(this).closest('div.col-xs-1').next('div');
                        let text = ele_div.children().html();
                       ele_div.html(text);
                        $.post (url, data, function (res)
                        {
                            if (res.code)
                            {
                            }
                        });
          });
    });
    
            function error_layer (msg)
        {
            layer.open ({
                title: '错误提示',
                icon: 2,
                content: msg,
                yes: function ()
                {
                    layer.closeAll ();
                }
            });
        }

        function success_layer (msg)
        {
            layer.open ({
                title: '成功提示',
                icon: 1,
                content: msg,
                yes: function ()
                {
                    layer.closeAll ();
                }
            });
        }
</script>